<template>
	<view class="zone">
		<Header title="个人中心"></Header>
		<view class="bgmusic">
			<u-switch @change="change" size='44' active-color="#865172" inactive-color="#ddd"
				v-model="checked"></u-switch>
			<view class="bgt">
				背景音乐
			</view>
		</view>

		<view class="main">

			<view class="abox">
				<view class="hone">
					<view class="header">
						<image :src="userinfo.avatar" mode="widthFix"></image>
					</view>
					<view class="hdbox">
						<view class="jpone">
							昵称：{{userinfo.username}}
						</view>
						<view class="ysbao">
							<view class="invite">
								ID：{{userinfo.invite_code}}
							</view>
							<view class="copy_code" @click="$p.copy(userinfo.invite_code)">
								复制
							</view>
						</view>
						<view class="tianiq" @click="$p.navto('/pages/index/exclusPrivilege')">
							{{vip==0?'暂无':vip==1?'超凡脱俗':vip==2?'天骄之王':vip==3?'天劫高手':vip==4?'万古仙人':vip==5?'天启圣者':vip==6?'绝对掌控':vip==7?'永恒传说':vip==8?'神界至尊':vip==9?'永恒纪元':'暂无'}}
						</view>
					</view>
				</view>
			</view>


			<view class="htwo">
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="kbox">
					<view class="wdlq">
						我的零钱：{{userinfo.money}}
					</view>
					<view class="tixian" @click="$p.navto('/pages/index/withdrawal')">
						提现
					</view>
				</view>
			</view>

			<view class="xianyu_box">

				<view class="xianimg">
					<view class="timg" @click="$p.navto('/pages/index/xianyuBalance?id=2')">
						<image class="timg2" src="http://image.qxgm.site/tdz/img/my/smg-01.png" mode="widthFix"></image>
						<text class="tnamen">神石</text>
					</view>
					<view class="xianjif">
						{{userinfo.shenshi}}
					</view>
				</view>
				<view class="xianimg">
					<view class="timg" @click="$p.navto('/pages/index/xianyuBalance?id=1')">
						<image class="timg2" src="http://image.qxgm.site/tdz/img/my/smg-02.png" mode="widthFix"></image>
						<text class="tnamen">灵石</text>
					</view>
					<view class="xianjif">
						{{userinfo.lingshi}}
					</view>
				</view>
				<view class="xianimg">
					<view class="timg" @click="$p.navto('/pages/index/xianyuBalance?id=3')">
						<image class="timg2" src="http://image.qxgm.site/tdz/img/my/smg-03.png" mode="widthFix"></image>
						<text class="tnamen">铜钱</text>
					</view>
					<view class="xianjif">
						{{userinfo.tongqian}}
					</view>
				</view>

			</view>


			<view class="middle">
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mbox">
					<view class="title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>邀请好友</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>

					<view class="navinfo">
						<view class="sgbox">
							<view class="simg" @click="$p.navto('/pages/index/invite')">
								<image src="http://image.qxgm.site/tdz/img/my/mg-19.png" mode="widthFix"></image>
								<text>邀请海报</text>
							</view>
							<view class="simg" @click="tuiguang=true">
								<image src="http://image.qxgm.site/tdz/img/my/mg-20.png" mode="widthFix"></image>
								<text>推广链接</text>
							</view>
							<view class="simg" @click="$p.navto('/pages/index/myteam')">
								<image src="http://image.qxgm.site/tdz/img/my/mg-21.png" mode="widthFix"></image>
								<text>我的团队</text>
							</view>
						</view>

						<view class="chakan" @click="$p.navto('/pages/index/pomotion')">
							<image class="libao" src="http://image.qxgm.site/tdz/img/my/mg-16.png" mode="widthFix">
							</image>
							<text>多重奖励！任性领！</text>
							<view class="see">
								查看
							</view>
						</view>

					</view>
					<view class="title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>常用功能</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>
					<view class="sgbox2">
						<view class="simg" @click="$p.navto('/pages/index/receivingAccount')">
							<image src="http://image.qxgm.site/tdz/img/my/mg-22.png" mode="widthFix"></image>
							<text>收款账号</text>
						</view>
						<view class="simg" @click="contact2=true">
							<image src="http://image.qxgm.site/tdz/img/my/mg-23.png" mode="widthFix"></image>
							<text>联系方式</text>
						</view>
						<view class="simg" @click="$p.navto('/pages/index/authentication')">
							<image src="http://image.qxgm.site/tdz/img/my/mg-24.png" mode="widthFix"></image>
							<text>实名认证</text>
						</view>
						<view class="simg" @click="$p.navto('/pages/index/customerService')">
							<image src="http://image.qxgm.site/tdz/img/my/mg-25.png" mode="widthFix"></image>
							<text>专属客服</text>
						</view>
						<view class="simg" @click="$p.navto('/pages/index/set')">
							<image src="http://image.qxgm.site/tdz/img/my/mg-26.png" mode="widthFix"></image>
							<text>设置</text>
						</view>
						<view class="simg" @click="$p.navto('/pages/index/service_kf')">
							<image src="http://image.qxgm.site/tdz/img/my/mg-27.png" mode="widthFix"></image>
							<text>在线客服</text>
						</view>
					</view>
				</view>

			</view>

		</view>


		<!-- 联系方式 -->
		<u-mask :show="contact2">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>联系ta</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" v-model="weixin" />
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" v-model="qq" />
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" v-model="qq_group" />
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="filling">确认填写</u-button>
					</view>
				</view>
				<image class="m_close" @click="contact2 = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 推广链接 -->
		<u-mask :show="tuiguang">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>推广链接</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop22">
							<view class="tuip">
								复制链接发给好友，点击链接注册：
							</view>
							<view class="tuiliank">
								{{val}}
							</view>

						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" style="margin-top: 30px;" @click="$p.copy(val)">复制</u-button>
					</view>
				</view>
				<image class="m_close" @click="tuiguang = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				contact2: false,
				weixin: '',
				qq: '',
				qq_group: '',
				tuiguang: false,
				val: "http://tdzh.cpgm8.cn/index.php/api/qr/" + uni.getStorageSync("invite_code"),
				vip: '', //vip

				muteBgMusic: true, //静音
				checked: uni.getStorageSync('is_music'), //音乐开关
			};
		},
		onShow() {
			this.getUserinfo();
		},
		watch: {
			muteBgMusic(newValue, oldValue) {
				if (newValue) {
					// 开启静音
					this.$music.playBgm({
						mute: true
					});
				} else {
					// 关闭 静音
					this.$music.playBgm({
						mute: false
					});
				}
			},

		},
		methods: {
			// 音乐开关
			change(status) {
				uni.setStorageSync('is_music', status)
				if (status) {
					this.$music.playBgm({
						mute: false
					})
				} else {
					this.$music.playBgm({
						mute: true
					});
				}
			},
			// 用户信息
			async getUserinfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
					this.vip = res.data.vip
					this.weixin = (res.data.wechat_num == '' || res.data.wechat_num == null) ? '暂无设置' : res.data
						.wechat_num
					this.qq = (res.data.qq_num == '' || res.data.qq_num == null) ? '暂无设置' : res.data.qq_num
					this.qq_group = (res.data.qq_group_num == '' || res.data.qq_group_num == null) ? '暂无设置' : res.data
						.qq_group_num
				}
			},

			// 确认填写
			async filling() {
				let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
				if (reg.test(this.weixin)) {
					this.$u.toast('微信含有中文字符')
					return
				}

				if (this.weixin == '' || this.qq_group == '' || this.qq == '') {
					this.$u.toast('含有未填写字段')
					return
				}

				let res = await this.$http.index.profile({
					nickname: this.userinfo.nickname,
					wechat_num: this.weixin,
					qq_group_num: this.qq_group,
					qq_num: this.qq
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.getUserInfo();
					this.contact2 = false
				}
			},

		},
	}
</script>

<style lang="less">
	.zone {
		background: url('http://image.qxgm.site/tdz/img/public/p_bg.png') no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;
	}

	.abox {
		padding: 2px 5px 0;
		margin-bottom: 4vh;
	}

	// #ifdef H5
	.bgmusic {
		display: flex;
		flex-direction: column;
		align-content: center;
		position: absolute;
		right: 10px;
		top: 25px;
		z-index: 999;

		.bgt {
			font-size: 13px;
			color: #fff;
			line-height: 14px;
			font-weight: normal;
			margin-top: 5px;
		}
	}

	// #endif


	// #ifdef APP-PLUS
	.bgmusic {
		display: flex;
		flex-direction: column;
		align-content: center;
		position: absolute;
		right: 10px;
		top: 44px;
		z-index: 999;

		.bgt {
			font-size: 13px;
			color: #fff;
			line-height: 14px;
			font-weight: normal;
			margin-top: 5px;
		}
	}

	// #endif

	.ping1 {
		width: 100%;
		display: flex;
	}


	.hone {
		position: relative;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/my/mg-13.png) no-repeat;
		background-size: 100% 100%;
		padding-left: 68px;
		padding-top: 7px;
	}

	.tianiq {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 70px;
		height: 28px;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
		font-size: 12px;
		font-weight: 400;
		color: #fbf898;
		line-height: 28px;
		text-align: center;
		text-shadow: 0 1px 1px #530B0B;
	}

	.header {
		position: absolute;
		top: -5px;
		left: 0px;
		width: 64px;
		height: 64px;
		box-sizing: border-box;
		background: url(http://image.qxgm.site/tdz/img/my/mg-02.png) no-repeat;
		background-size: 100% 100%;
		padding: 3px 4px;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.copy_code {
		width: 58px;
		height: 26px;
		font-size: 14px;
		font-weight: normal;
		line-height: 26px;
		text-align: center;
		color: #e3dfb8;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/my/mg-17.png) no-repeat;
		background-size: 100% 100%;
		margin-left: 10px;
	}

	.jpone {
		font-size: 15px;
		font-weight: normal;
		color: #E7E0E3;
		line-height: 15px;
	}

	.invite {
		font-size: 14px;
		font-weight: normal;
		color: #E7E0E3;
		line-height: 14px;
	}

	.ysbao {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.htwo {
		position: relative;
	}

	.yun {
		position: absolute;
		top: -38%;
		left: 0;
		width: 44%;
		z-index: 9;
	}



	.kbox {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 5px 18px 5px 20px;
		border-bottom: 6px solid #b0a3a1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px 0 6px;

		image {
			width: 18%;
		}

		text {
			font-size: 18px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.mbox {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0 5px 6px;
	}

	.xianyu_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 0 12px;
		background: url(http://image.qxgm.site/tdz/img/public/heihei.png);
		background-size: 100% 100%;
	}

	.wdlq {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
	}

	.tixian {
		width: 58px;
		height: 33px;
		font-size: 14px;
		text-align: center;
		font-weight: normal;
		color: #f9ecbb;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/my/mg-17.png) no-repeat;
		background-size: 100% 100%;
	}

	.xianimg {
		width: 33%;
		text-align: center;
	}

	.navinfo {
		background: rgba(93, 69, 81, 0.15);
		border-radius: 1px;
	}

	.sgbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px 10% 0;

		.simg {
			width: 26%;
			text-align: center;

			image {
				width: 100%;
			}

			text {
				font-size: 15px;
				font-weight: normal;
				color: #50463E;
				line-height: 15px;
			}
		}
	}

	.sgbox2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px 10%;
		background: rgba(93, 69, 81, 0.15);
		border-radius: 1px;

		.simg {
			width: 26%;
			text-align: center;

			image {
				width: 100%;
			}

			text {
				font-size: 15px;
				font-weight: normal;
				color: #50463E;
				line-height: 15px;
			}
		}
	}

	.chakan {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/my/mg-18.png) no-repeat;
		background-size: 100% 100%;
		padding: 6px 19px 5px 6px;
		margin-top: 30px;
		margin-bottom: 20px;

		text {
			font-size: 18px;
			font-weight: normal;
			color: #051D1C;
			line-height: 18px;
			margin-left: 60px;
		}

		.see {
			width: 58px;
			height: 33px;
			font-size: 14px;
			text-align: center;
			font-weight: normal;
			color: #f9ecbb;
			line-height: 33px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/my/mg-17.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.libao {
		position: absolute;
		bottom: 0;
		left: 6px;
		width: 50px;
	}

	.timg {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10%;

		.tnamen {
			position: absolute;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			top: 0;
			left: 20px;
		}

		.timg2 {
			display: block;
			margin: 0 auto;
			width: 60%;
		}
	}

	.xianjif {
		font-size: 14px;
		font-weight: normal;
		color: #FFFFCC;
		line-height: 24px;
	}

	.jihuop {
		padding: 0 9%;

		.spart {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6px;

			text {
				width: 22%;
			}
		}

		.slink {
			width: 78%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #bcb8ba;
			padding: 0 6px 0 19px;
			height: 40px;

			input {
				font-size: 15px;
				font-weight: normal;
				color: #50433A;
				line-height: 24px;
			}

			.scopy {
				width: 49px;
				height: 28px;
				display: block;
				font-size: 12px;
				text-align: center;
				font-weight: normal;
				color: #f9e5b6;
				line-height: 28px;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.jihuop22 {
		padding: 0 6%;
	}

	.tuip {
		font-size: 15px;
		color: #333333;
		font-weight: 500;
		line-height: 15px;
		text-align: center;
		margin-top: 10px;
	}

	.tuiliank {
		font-size: 12px;
		color: #50433A;
		line-height: 15px;
		padding: 12px 0px;
		background: #bcb8ba;
		border-radius: 1px;
		text-align: center;
		margin-top: 16px;
	}
</style>